<html>

<head>
    <style>
        #startbtn {
            display: block;
            position: absolute;
            width: 100;
            height: 60;
            text-align: center;
            vertical-align: middle;
            color: chocolate;
            top: 650px;
        }
        #handimg{
            position: absolute;
            transform: scale(0.5);
            left: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <span id="startbtn" onclick="clickStart()">开始运动</span>
</body>
<script src="https://cdn.jsdelivr.net/g/jquery@1.11.3,jquery.easing@1.3(jquery.easing.1.3.min.js)"></script>
<script src="../jquery-drawsvg-master/public/jquery.drawsvg.js"></script>
<script src="../beizer.js"></script>
<script>
    var namespace = 'http://www.w3.org/2000/svg';

    var svg = document.createElementNS(namespace, 'svg');
    svg.setAttribute('id', 'svg');
    svg.setAttribute('width', 960);
    svg.setAttribute('height', 640);
    svg.style.border = '1px solid #ccc';

    var offsetx = 960 / 2;
    var offsey = 640 / 2;

    var pos1 = {
        x: -200 + offsetx,
        y: offsey - (-200),
    }
    var pos2 = {
        x: 100 + offsetx,
        y: offsey - (-100),
    }
    var pos3 = {
        x: 0 + offsetx,
        y: offsey - (100)
    }
    var pos4 = {
        x: -200 + offsetx,
        y: offsey - (0)
    }

    var ctrl1 = {
        x: -58 + offsetx,
        y: offsey - (-245)
    }
    var ctrl2 = {
        x: 338 + offsetx,
        y: offsey - (119)
    }
    var ctrl3 = {
        x: -72 + offsetx,
        y: offsey - (96)
    }

    var path = document.createElementNS(namespace, 'path');
    var pahtdata = 'M' + pos1.x + ',' + pos1.y
        + 'Q' + ctrl1.x + ',' + ctrl1.y + ',' + pos2.x + ',' + pos2.y
        + 'Q' + ctrl2.x + ',' + ctrl2.y + ',' + pos3.x + ',' + pos3.y
        + 'Q' + ctrl3.x + ',' + ctrl3.y + ',' + pos4.x + ',' + pos4.y

    path.setAttribute('d', pahtdata);
    path.setAttribute('stroke', '#979797');
    path.setAttribute('stroke-width', 10);
    path.setAttribute('fill', 'none');
    svg.appendChild(path);

    var rect = document.createElementNS(namespace, 'rect');
    rect.setAttribute('x', 10);
    rect.setAttribute('y', 10);
    rect.setAttribute('width', 10);
    rect.setAttribute('height', 10);
    rect.setAttribute('fill', 'red');

    svg.appendChild(rect);
    document.body.appendChild(svg);


    // var handimg = document.createElement('img');
    // handimg.setAttribute('src','../hand.png');
    // handimg.setAttribute('id','handimg');
    // document.body.appendChild(handimg);


    var posarr = [pos1, pos2, pos3, pos4];
    var ctrlarr = [ctrl1, ctrl2, ctrl3];
    var lineinfo = [];

    var linestep = 0;
    var speed = 1;

    // console.log("creatbzr==>",creatOneBeizer);
    for (var i = 1; i < posarr.length; i++) {
        var start = posarr[i - 1];
        var end = posarr[i];
        var ctrl = ctrlarr[i - 1];
        var oneline = creatOneBeizer();
        console.log("startinit===>", oneline);
        var usestep = oneline.init(start, ctrl, end, speed);
        console.log(linestep, usestep);
        linestep += usestep;
        lineinfo.push({
            line: oneline,
            step: linestep
        });
    }

    console.log("allstep===>", linestep);
    console.log("总长===》", path.getTotalLength());

    path.setAttribute('stroke-dasharray',linestep);
    path.setAttribute('stroke-dashoffset',linestep);

    var startmove = false;
    var movetime = 0;
    var reqid = 1;
    var lastframe = Date.now();

    var movespeed = 50;
    var loop = function () {
        if (startmove) {
            var ntime = Date.now();
            var passtime = ntime - lastframe;
            if (passtime > 30) {
                passtime = 30;
            }
            var utime = passtime / 1000;
            movetime += utime;
            var moveline = movespeed * movetime;
            if (moveline > linestep) {
                moveline = linestep;
                startmove = false;
            }

            var inline;
            var inlinestep = 0;
            var laststep = 0;
            for (var i = 0; i < lineinfo.length; i++) {
                var iline = lineinfo[i];
                var { line, step } = iline;
                if (moveline < step) {
                    inline = line;
                    inlinestep = moveline - laststep;
                    break;
                }
                laststep = step;
            }
            if (inline) {
                var pos = inline.getAnchorPoint(inlinestep);
                // movesp.setPosition(pos[0], pos[1]);
                rect.setAttribute('x',pos[0]-5);
                rect.setAttribute('y',pos[1]-5);

                // handimg.style.left = (pos[0]-25)+'px';
                // handimg.style.top = (pos[1]-43/2)+'px';
                // handimg.style.transform = rotate(pos[2]+'deg');
            }
            
            var lesstep = linestep - moveline;
            path.setAttribute('stroke-dashoffset',lesstep)


            reqid = requestAnimationFrame(loop);
        }
    }

    var clickStart = function () {
        // if(startmove){
        //     return;
        // }
        startmove = true;
        movetime = 0;
        lastframe = Date.now();
        loop();
    }



</script>

</html>